import React from "react";
import {Form, Input, Button, Checkbox, Row, Col} from 'antd';
import history from "../utils/history";
import {withRouter} from "react-router-dom";
import axios from "axios";
import MyTitle from "../title/myTitle";

const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};
class MyRegisterForm extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            usernameIsValidating:false,
            usernameValidateStatus:"validating",
            usernameHelp:""
        }
        this.changeUsernameStatus=this.changeUsernameStatus.bind(this);
    }

    onFinish = values => {
        let _this=this;
        let data={
            username: values.username,
            password: values.password
        }
        //http://39.99.159.212:8090/api/rest/consumer/register
        axios.post('http://localhost:8090/api/rest/consumer/register',data).then(function (response) {
            if(response.data.status===200){
                _this.props.history.push("/user/register/success");
            }
        }).then(function (error) {
        })
    };

    changeUsernameStatus(e){
        let _this=this;
        let username=e.target.value;
        let _e=e;
        if(username===""||username.isEmpty){
            this.setState({
                usernameIsValidating:false,
                usernameValidateStatus:"validating",
                usernameHelp:""
            })
            return;
        }
        this.setState({
            usernameIsValidating:true
        })
        let data={
            username:username
        }
        axios.post('http://localhost:8090/api/rest/consumer/usernameCheck',data).then(function (response) {
            if(response.data.status===200){
                _this.setState({
                    usernameValidateStatus: 'success',
                    usernameHelp: ''
                })
            }else {
                _this.setState({
                    usernameValidateStatus:'warning',
                    usernameHelp:'用户名已被占用'
                })
            }
        })
    }


    onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };
    render() {
        return (
            <div style={{
                display: 'flex',
                flexFlow: 'column',
                alignItems: 'center',

            }}>
                <Row style={{
                    paddingTop: '15vh'
                }}>
                    <Col>
                        <MyTitle title='Register' style={{
                        }}/>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <Form
                            {...layout}
                            name="basic"
                            initialValues={{
                                remember: true,
                            }}
                            onFinish={this.onFinish}
                            onFinishFailed={this.onFinishFailed}
                            style={{
                                paddingTop: '10vh',
                                width: '480px'
                            }}
                        >
                            <Form.Item
                                hasFeedback={this.state.usernameIsValidating}
                                validateStatus={this.state.usernameValidateStatus}
                                label="Username"
                                name="username"
                                help={this.state.usernameHelp}
                                rules={[
                                    {
                                        required: true,
                                        message: 'Please input your username!',
                                    },
                                ]}
                                style={{
                                    paddingRight: '10vh'
                                }}
                            >
                                <Input onBlur={this.changeUsernameStatus}/>
                            </Form.Item>

                            <Form.Item
                                label="Password"
                                name="password"
                                rules={[
                                    {
                                        required: true,
                                        message: 'Please input your password!',
                                    }
                                ]}
                                style={{
                                    paddingRight: '10vh'
                                }}
                            >
                                <Input.Password />
                            </Form.Item>
                            <Form.Item
                                label="Confirm Password"
                                name="confirm"
                                rules={[
                                    {
                                        required: true,
                                        message: 'Please confirm your password!',
                                    },
                                    ({ getFieldValue }) => ({
                                        validator(rule, value) {
                                            if (!value || getFieldValue('password') === value) {
                                                return Promise.resolve();
                                            }
                                            return Promise.reject('The two passwords that you entered do not match!');
                                        },
                                    }),
                                ]}
                                style={{
                                    paddingTop:"3vh",
                                    paddingRight: '10vh'
                                }}
                            >
                                <Input.Password />
                            </Form.Item>

                            <Form.Item {...tailLayout}
                                style={{
                                paddingLeft: '10%'
                            }}>
                                <Button type="primary" htmlType="submit" style={{
                                    background: "hsl(171, 80%, 41%)",
                                    border: "hsl(171, 80%, 41%)",
                                }}>
                                    Register
                                </Button>
                                <a style={{
                                    paddingLeft: '10%',
                                    color: 'hsl(171, 80%, 41%)'
                                }} onClick={()=>history.back()}>Back</a>
                            </Form.Item>
                        </Form>
                    </Col>
                </Row>
            </div>
        );
    };
}

export default withRouter(MyRegisterForm);